import React, { useState } from 'react';
import { Tabs, Space, Table, Form } from 'antd';
import MYForm from './form';
const { TabPane } = Tabs;

const index = () => {
  const [form] = Form.useForm();

  const tabArr = [
    { name: '个人住址信息', id: '0' },
    { name: '个人email信息', id: '1' },
  ];
  const [data, setData] = useState([
    {
      key: 0,
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: 1,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: 2,
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ]);
  const [list, setList] = useState([
    {
      key: 0,
      name: 'John Brown',
      age: 32,
      email: '213k',
    },
    {
      key: 1,
      name: 'Jim Green',
      age: 42,
      email: 'L543Park',
    },
    {
      key: 2,
      name: 'Joe Black',
      age: 32,
      email: 'S543543rk',
    },
  ]);
  const [isUpdate, setIsUpdate] = useState(-1);
  //tab状态
  const [tabKey, setTabKey] = useState('0');
  const onChange = (key) => {
    setTabKey(key);
  };
  //弹出框状态
  const [isModalVisible, setIsModalVisible] = useState(false);
  const openDoor = () => {
    setIsModalVisible(true);
  };
  const closeDoor = () => {
    setIsModalVisible(false);
  };
  // 删除
  const remove = ({ key }) => {
    if (Number(tabKey)) {
      setList(list.filter((item) => item.key !== key));
    } else {
      setData(data.filter((item) => item.key !== key));
    }
  };
  //增加
  const get = (val) => {
    const key = +new Date();
    if (Number(tabKey)) {
      setList([...list, { ...val, key }]);
    } else {
      setData([...data, { ...val, key }]);
    }
  };
  //修改
  const changeData = (record) => {
    setIsModalVisible(true);
    setIsUpdate(record.key);
    form.setFieldsValue(record);
  };
  const updata = (val) => {
    const obj = { ...val, key: isUpdate };
    if (Number(tabKey)) {
      const index = list.findIndex((item) => item.key === isUpdate);
      const newArr = [...list];
      newArr[index] = obj;
      setList(newArr);
    } else {
      const index = data.findIndex((item) => item.key === isUpdate);
      const newArr = [...data];
      newArr.splice(index, 1, obj);
      setData(newArr);
    }
  };
  const updateFlag = () => {
    setIsUpdate(-1);
  };
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: Number(tabKey) ? 'Email' : 'Address',
      dataIndex: Number(tabKey) ? 'email' : 'address',
      key: Number(tabKey) ? 'email' : 'address',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => changeData(record)}>Update</a>
          <a onClick={() => remove(record)}>Delete</a>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <MYForm
        tabKey={tabKey}
        form={form}
        isUpdate={isUpdate}
        updateFlag={updateFlag}
        get={get}
        isModalVisible={isModalVisible}
        openDoor={openDoor}
        closeDoor={closeDoor}
        updata={updata}
      />
      <Tabs activeKey={tabKey} onChange={onChange}>
        {tabArr.map((item) => (
          <TabPane tab={item.name} key={item.id}>
            <Table
              columns={columns}
              dataSource={Number(tabKey) ? list : data}
            />
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
};
export default index;
